﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Demo</title>
        <script src="../Scripts/jquery.OrgPostEmpData.js" type="text/javascript"></script>
        <script src="../Scripts/jquery-1.6.min.js" type="text/javascript"></script>
        <script src="../Scripts/jquery.linq.min.js" type="text/javascript"></script>
        <style type="text/css">
            body {
                background-color: #F8F8FF;
            }
            
            #main {
                position: absolute;
                top: 100px;
                left: 36%;
                width: 400px;
                background-color: #F5FFFA;
            }
            
            #input_text{
                position: absolute;
                font-size: 18px;
                width: 390px;
                height: 23px;
                border: 1px solid #C9C9C9;
            }
            #img 
            {
                position: absolute;
                z-index:100;
                margin-left:450px;
            }
            #input_div {
                position: absolute;
                width: 392px;
                top: 26px;
                border: 1px solid #454545;
                display: none;
                overflow:auto ;
                height:150px;
                
            }
            
            #input_div {
                text-decoration: none;
                background-color: #FFFAFA;
            }
            
            #input_div div {
                vertical-align: middle;
                padding: 4px;
                font-weight: bold;
                color: #000000;
                width: 100%;
            }
            
            .div_item_select {
                background-color: #E0EEEE;
                height: 22px;
                font-size: 18px;
            }
        </style>
        <script type="text/javascript">
            function seek(key) {
                //debugger
                //var key = $("#input_div").val();
                var _a = [];
                var result = $.grep(OrgPostEmpData.rows, function (e, n) {
                    if (e.Caption.indexOf(key) >= 0 && e.flag == '3e') { _a.push(e); }  
                    if (n < 5) {
                    //alert(e.Caption);
                    } 
                    });
                    return _a;
            }
            $(document).ready(function () {
                /**
                * 当鼠标 放上去 的效果 CSS  Class名称
                */
                var divItemSelect = 'div_item_select';
                /**
                * 展示数据 的DIV
                */
                var showDataDivId = "input_div";
                /**
                * 输入框
                */
                var inputDataTextId = "input_text";
                /**
                * 点击
                * @param {Object} event 
                */
                $(document).click(function (event) {
                    if (event.target.id != inputDataTextId) {
                        $("#" + showDataDivId).slideUp(200);
                    }
                });
                /**
                * 鼠标在文本框输入值
                * @param {Object} event
                */
                $("#" + inputDataTextId).keyup(function (event) {
                    if (event.keyCode == 40) {//down
                        chageSelect(1);
                    }
                    else if (event.keyCode == 38) {//up
                        chageSelect(-1);
                    }
                    else if (event.keyCode == 13) {//回车
                        item_click($("#" + showDataDivId + " div[class='" + divItemSelect + "']"));
                    }
                    else if (this.value.length > 0) {
                        var str = "";
                        var result = seek(this.value);
                        //debugger
                        $.each(result, function (i) { //alert(e.Caption);

                            //debugger
                            //此处拼接服务器返回的数据。。。。
                            str += "<div>" +result[i].Caption + "</div>" + //展示的数据
                            "<input type='hidden' name='d_index' value='" +
                            i +
                            "' />" //位置，勿动
                         });


                        //..ajax请求， 返回的时候 调用。。
                        //以下为 Ajax 返回的时候 调用的数据
                        var len = 10 - this.value.length;
                        if (len < 1) {
                            len = 5;
                        }
                        
//                      for (var i = 0; i < len; i++) {
//                            var index = i; //此处 为展示顺序，必须要
//                            //此处拼接服务器返回的数据。。。。
//                            str += "<div>" + this.value + index + "</div>" + //展示的数据
//                            "<input type='hidden' name='d_index' value='" +
//                            index +
//                            "' />" //位置，勿动
//                            //+ "<input type='hidden' name='d_value' value='" +index +"' />"; //用于放置数据
//                      }
                        //展示层，并展示数据
                        $("#" + showDataDivId).html(str).slideDown(200);
                        //注册事件
                        registerInputEvent();
                    }
                    else {
                        $("#" + showDataDivId).slideUp(200);
                    }
                });
                //.blur(function(){$("#" + showDataDivId).slideUp(200);});
                /**
                * 键盘操作  向上 或向上 
                * @param {Object} opt   向上 -1  向下 1 
                */
                function chageSelect(opt) {
                    if ($("#input_div").css('display') == 'block') {
                        var obj = $("#input_div div[class='" + divItemSelect + "']");
                        if (obj.html() == null) {//当前还未选中。
                            if (opt == 1) {
                                $("#" + showDataDivId + " div:first").addClass(divItemSelect);
                            }
                            else {
                                $("#" + showDataDivId + " div:last").addClass(divItemSelect);
                            }
                        }
                        else {
                            var curr = parseInt($("#" + showDataDivId + " div[class='" + divItemSelect + "'] ~ input[name='d_index']").val()) + opt;
                            var divCount = $("#" + showDataDivId + " div").size();
                            $("#" + showDataDivId + " div[class='" + divItemSelect + "']").removeClass(divItemSelect);
                            $("#" + showDataDivId + " div:eq(" + ((curr < 0) ? (divCount - 1) : ((curr == divCount) ? 0 : curr) + ")")).addClass(divItemSelect);
                        }
                    }
                }
                /**
                * 注册事件
                */
                function registerInputEvent() {
                    $("#" + showDataDivId + " div").click(function () {
                        item_click($(this));
                    }).mouseover(function () {
                        $("#" + showDataDivId + " div[class='" + divItemSelect + "']").removeClass(divItemSelect);
                        $(this).addClass(divItemSelect);
                    }).mouseout(function () {
                        $(this).removeClass(divItemSelect);
                    });
                }
                /**
                * 点击每一项的操作
                * @param {Object} obj
                */
                function item_click(obj) {
                    if (obj.html() == null) {//如果是按回车键。。。
                        //暂时不做操作。。。。
                    }
                    else { //如果是点击 选择
                        $("#" + inputDataTextId).val($(obj).html()).focus();
                        //取得 你要放置的数据  d_value   为 变量名。。。
                        //var currValue = $("#" + showDataDivId + " div[class='" + divItemSelect + "'] ~ input[name='d_value']").val();
                    }
                    $("#" + showDataDivId).hide();
                    //跳转。。。。。等 操作。
                }
            });
        </script>
    </head>
    <body>
        <div id="main">
            <input type="text" id="input_text"><img id="img" src="" style="width:20px; height:20px;" />
            <div id="input_div">
            </div>
            
        </div>
    </body>
</html>
